import { useModel } from '@umijs/max';
import { Typography, theme, Button, Tooltip, Modal, Avatar, message } from 'antd';
import './index.less';
import IconFont from '@/components/IconFont';
import { CopyFilled, EditFilled, UserOutlined } from '@ant-design/icons';
import { doFetch } from '@/utils/doFetch';
import React, { useState, useEffect } from 'react';



const { Paragraph } = Typography


function InvokeCard(props) {
  const { item, currentUser, refresh } = props;
  const { token } = theme.useToken();
  const { colorText, colorSecondary, colorOppsites, colorBgCard, colorPrimary } = token;
  const isCur = currentUser.orgId === item.id;
  const isMine = currentUser.id === item.orgCreateUserId;

  const { invokeUser, orgName, createTime } = item ?? {};

  return (
    <div
      className={`itemcards`}
      style={{
        borderColor: isCur ? colorSecondary : colorOppsites,
        borderWidth: 2,
        borderStyle: 'solid',
        backgroundColor: isCur ? 'transparent' : colorOppsites,
        color: colorText,
        position: 'relative',
        boxSizing: 'border-box',
      }}
    >
      <div className="centerl gap12" style={{width:"100%"}}>
        <Avatar src={invokeUser?.headUrl}>{invokeUser.name.charAt(0)}</Avatar>
        <div className="columns" style={{flex:1}}>
          <div className="centerl " style={{ gap: 6 }}>
            <b style={{ color: isCur ? colorPrimary : colorText, }}>{invokeUser.name} 邀请您加入 【{item?.orgName}】</b>
            {/* <Tag color={isCur ? colorSecondary : colorText} style={{height:16,lineHeight:"15px",display:"block"}}>2</Tag> */}
          </div>
          <div style={{ marginTop: 4, fontSize: 12, opacity: 1 }} className='spread'>
            <span >{createTime}</span>
            <div className="centerr gap6">
              <Button
                size='small'
                type='text'
                style={{ backgroundColor: colorOppsites }}
                onClick={() => handleAction(item.id, 4)}
              >忽略</Button>
              <Button
                size='small'
                type='text'
                style={{ backgroundColor: colorOppsites }}
                onClick={() => handleAction(item.id, 3)}
                ghost
              >拒绝</Button>
              <Button
                size='small'
                type='primary'
                onClick={() => handleAction(item.id, 2)}
              >同意</Button>
            </div>
          </div>
        </div>
      </div>


    </div>
  );


  function handleAction(id, handleResult) {
    doFetch({ url: `/joinOrgInvitation/${id}`, params: { handleResult: handleResult }, method: "PUT" }).then(res => {
      if (res.code === 0) {
        refresh()
      }
    })
  }
}

export default InvokeCard;
